<template>
    <!-- 主要内容区域 -->
    <div class="main-content" v-loading="loading">
        <el-card v-for="(item, index) in dataInfo.tableInfo" :key="index" style="margin: 20px 0px">
            <template #header>
                <div class="card-header">
                    <span>表名：{{ item.tableName }}</span>
                </div>
            </template>
            <el-table :data="item.tableInfoList" :border="true">
                    <el-table-column label="列名称" prop="Field" align="center"></el-table-column>
                    <el-table-column label="字符集" prop="Comment" align="center"></el-table-column>
                    <el-table-column label="数据类型" prop="Type" align="center"></el-table-column>
                    <el-table-column label="是否允许NULL值" prop="Null" align="center"></el-table-column>
                    <el-table-column label="列的属性值" prop="Extra" align="center"></el-table-column>
                    <el-table-column label="访问权限" prop="Privileges" align="center"></el-table-column>
                    <el-table-column label="字符集排序规则" prop="Collation" align="center"></el-table-column>
                    <el-table-column label="索引" prop="Key" align="center"></el-table-column>
                    <el-table-column label="默认值" prop="Default" align="center"></el-table-column>
                </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref,reactive,onMounted } from 'vue'
import {errorMsg} from "../../../utils/message";
import {getTableInfoList} from "../../../api/rank/table"

// 加载
const loading = ref(true)

const dataInfo = reactive({
    tableInfo: []
})

// 加载信息
const tableInfoList = ()=>{
getTableInfoList().then(res => {
    loading.value = false
    if (res.code == 200){
        dataInfo.tableInfo = res.data
    } else {
        errorMsg(res.message)
    }
})
}

onMounted(()=>{
    tableInfoList();
})
</script>
<style scoped>

</style>